<template>
    <div class="wrap">
        <!-- <div class="input-boxs">
            <input v-for="(value,index) in inputs" :key="index" type="number" maxlength=1 class="input-wrap" @focus="getIndex(index)" @input="setValue" :autofocus=value.enable>
        </div>
        <div>
            <text class="input-value" v-for="(value,index) in inputs" :key="index" >{{value.number}}{{value.enable}}</text>
        </div> -->
        <!-- <div class="number-wrap">
            <div ref="number" class="number-left">
                <text class="number-text">1</text>
                <text class="number-text">2</text>
                <text class="number-text">3</text>
                <text class="number-text">4</text>
                <text class="number-text">5</text>
                <text class="number-text">6</text>
            </div>
            <div class="number-mid">
                <text class="number-text">of</text>
            </div>
            <div class="number-right">
                <text class="number-text">6</text>
            </div>
        </div> -->
        <!-- <div class="button" @click="add"></div> -->
    </div>
</template>
<style scoped>
.wrap {
  align-items: center;
}
/*
    验证码框
*/
/* .input-boxs {
  width: 750px;
  height: 200px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.input-wrap {
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #2fd9f0;
  tint-color: rgb(9, 109, 139);
  color: #000000;
} */
/*
    数字切换动画
*/
/* .number-wrap {
  width: 750xp;
  height: 100px;
  align-items: flex-start;
  justify-content: space-around;
  flex-direction: row;
  overflow: hidden;
  background-color: aqua;
}

.number-mid {
  width: 100px;
  height: 100px;
  align-items: center;
  justify-content: center;
}

.number-right {
  width: 100px;
  height: 100px;
  align-items: center;
  justify-content: center;
}

.number-left {
  width: 100px;
  height: 600px;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.number-text {
  line-height: 100px;
}
*/
/* .button {
  width: 200px;
  height: 200px;
  background-color: #e389fe;
  box-shadow:0px 0px 5px rgb(255, 69, 0);
}  */
</style>
<script>
const animation = weex.requireModule("animation");
export default {
  data() {
    return {
    //   数字动画
    //   moveLength: 0,
    //   clicked: false,
    //   验证码
    //   inputedNum: Number,
    //   inputs: [
    //     {
    //       enable: true,
    //       number: ''
    //     },
    //     {
    //       enable: false,
    //       number: ''
    //     },
    //     {
    //       enable: false,
    //       number: ''
    //     },
    //     {
    //       enable: false,
    //       number: ''
    //     }
    //   ]
    };
  },
  methods: {
    getIndex(e){
        this.inputedNum = e;
    },
    setValue(e) {
        var vm = this;
        // console.log(JSON.stringify(e));
        if (vm.inputedNum == 0) {
            vm.inputs[0].number = e.value;
        }else if (vm.inputedNum == 1) {
            vm.inputs[1].number = e.value;
        }else if (vm.inputedNum == 2) {
            vm.inputs[2].number = e.value;
        }else if (vm.inputedNum == 3) {
            vm.inputs[3].number = e.value;
        }
        if (vm.inputs[0].number.length > 0) {
            vm.inputs[1].enable = true;
            if (vm.inputs[1].number.length > 0) {
                vm.inputs[2].enable = true;
                if (vm.inputs[2].number.length > 0) {
                    vm.inputs[3].enable = true;
                }
            }
        }
    },
    add() {
      var vm = this;
      if (!vm.clicked) {
        vm.clicked = true;
        var numberEl = vm.$refs.number;
        vm.moveLength++;
        if (vm.moveLength >= 6) {
          vm.moveLength = 0;
        }
        animation.transition(
          numberEl,
          {
            styles: {
              opacity: "0",
              transform: "translateY(-" + vm.moveLength * 100 + "px)"
            },
            duration: 800,
            timingFunction: "ease",
            delay: 0
          },
          function() {
            animation.transition(
              numberEl,
              {
                styles: {
                  opacity: "1",
                  transform: "translateY(-" + vm.moveLength * 100 + "px)"
                },
                duration: 800,
                timingFunction: "ease",
                delay: 0
              },
              function() {
                vm.clicked = false;
              }
            );
          }
        );
      }
    }
  }
};
</script>
